<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./templates/main-layout.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="metaData">

    </ui:define>

    <ui:define name="title">Login Page</ui:define>

    <ui:define name="content">
        <f:view>
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages globalOnly="true" errorStyle="color: red" infoStyle="color: green" />
            </h:panelGroup>
            <h4>#{msg.login_header}</h4>
            <h:form>
                <h:panelGrid columns="3">
                    <h:outputLabel styleClass="formLabel" value="username:" for="username" />
                    <h:inputText id="username" styleClass="formTextBox" size="20" value="#{authentication.userName}"
                                 required="true" requiredMessage="#{msg.required_user_name_message}"/>
                    <h:message for="username" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel" value="Password:" for="password" />
                    <h:inputSecret id="password" styleClass="formTextBox" size="20" value="#{authentication.password}"
                                   required="true" requiredMessage="#{msg.required_password_message}"/>
                    <h:message for="password" errorStyle="color: red" />
                </h:panelGrid>
                <h:commandButton id="loginBtn" styleClass="formButton" action="#{authentication.authenticateUser}"
                                 value="Login" />
            </h:form>
        </f:view>
    </ui:define>

</ui:composition>